<template lang="pug">
  el-drawer.commonDrawer(
    title="类别详情"
    :visible="visibleDialog"
    append-to-body
    center
    destroy-on-close
    direction="rtl"
    size="840px"
    v-loading="loading"
    @close="$_handleCancel"
  )
    .drawer-content
      form-info(:items="detailFields" :layoutCol="{ sm: 8, md: 8, lg: 8 }")
      h3 检查项目信息
      s-table(
        ref="table"
        rowKey="id"
        :column="column"
        :pagination="null"
        :dataPops="list"
      )
</template>
<script>
import FormInfo from '@/components/Basic/Form/FormInfo'
import { getTargetDetail, proList } from '../api'

const column = [
  {
    prop: 'sort',
    label: '序号'
  },
  {
    prop: 'sortName',
    label: '项目名称',
    width: 400
  },
  {
    prop: 'parentName',
    label: '上级'
  }
]

export default {
  components: {
    FormInfo
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: [Number, String],
      default: ''
    }
  },
  data () {
    return {
      loading: false,
      column,
      info: {},
      list: []
    }
  },
  computed: {
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    detailFields () {
      const info = this.info.target || {}
      return [
        {
          key: 'typeName',
          label: '类别名称',
          initialValue: info.typeName
        },
        {
          key: 'sort',
          label: '检查分类',
          initialValue: info.sort
        },
        {
          key: 'targetType',
          label: '对象类别',
          initialValue: info.targetType
        },
        {
          key: 'conclusionType',
          label: '结论类别',
          initialValue: info.conclusionType
        },
        {
          key: 'cycle',
          label: '巡检周期',
          initialValue: info.cycle
        },
        {
          key: 'status',
          label: '状态',
          initialValue: info.status === '0' ? '正常' : '停用'
        }
      ]
    }
  },
  watch: {
    visible (val) {
      if (val && this.id) {
        this.getData()
      }
    }
  },
  methods: {
    getData () {
      this.list = []
      this.info = {}
      this.loaging = true
      getTargetDetail({ targetId: this.id }).then(res => {
        this.info = res
      }).finally(() => {
        this.loaging = false
      })

      proList({ targetId: this.id }).then(res => {
        this.list = res
      })
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
.drawer-content{
  h3 {
    font-size: 17px;
    margin-top: 30px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }

  ::v-deep{
    .tableWrapper{
      padding: 0
    }
  }
}
</style>
